<template>
  <section class="component rank-data-box">
    <common-title :title="this.menuType === 'tel-admin' ? '电催催收排名' : this.menuType === 'visit-admin' ? '外访催收排名' : '法务催收排名'" :showIcon="false">
      <template slot="append">
        <el-radio-group v-model="radio" style="float:left" size="mini" @change="radioChange">
          <el-radio-button label="year">年</el-radio-button>
          <el-radio-button label="month">月</el-radio-button>
          <el-radio-button label="week">周</el-radio-button>
          <el-radio-button label="day">日</el-radio-button>
        </el-radio-group>
        <el-date-picker v-model="value" :type="dateType" :placeholder="placeholder" :format="format" style="float:left;margin-left:15px" @change="dateChange">
        </el-date-picker>
      </template>
    </common-title>
    <data-box :data="dataSet">
      <template slot="columns">
        <el-table-column label="排名" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="collectorName" label="姓名" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="sumOutCaseNum" label="流出案件数量" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="sumOverdueAmount" label="流出案件金额" :min-width="$helper.getColumnWidth(6)" :formatter="(row) =>  $filter.toThousands(row.sumOverdueAmount)">
        </el-table-column>
        <el-table-column prop="sumAddFollowupNum" :label="menuType === 'tel-admin' ? '添加催记个数' : menuType === 'visit-admin'? '添加外访催记个数' : '添加法务催记个数'" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="sumRepayAmount" label="回款总金额" :min-width="$helper.getColumnWidth(6)" :formatter="(row) =>  $filter.toThousands(row.sumRepayAmount)">
        </el-table-column>
        <el-table-column prop="sumRepayNum" label="回款总个数" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Prop } from 'vue-property-decorator'
import CommonTitle from "~/components/common/common-title.vue";
import { HomePageService } from '~/services/domain-service/home-page.service';
import { Dependencies } from "~/core/decorator";

@Component({
  components: {
    CommonTitle
  }
})
export default class RankDataBox extends Vue {
  @Dependencies(HomePageService)
  private homePageService: HomePageService

  @Prop() private menuType

  private dataSet: any = []
  private radio: any = 'year'
  private value: any = ''
  private dateType = 'year'
  private format: any = 'yyyy'
  private placeholder: any = '请选择年份'
  private startDate: any = ''
  private endDate: any = ''

  private refreshData() {
    this.homePageService.getCollectionRanking({
      type: this.menuType,
      startDate: this.startDate,
      endDate: this.endDate
    }).subscribe(
      data => {
        this.dataSet = data
      }
    )
  }

  private mounted() {
    this.dateChange(new Date())
    this.refreshData()
  }

  private paramsHandler() {
    const params: any = {
      type: this.menuType,
      startDate: this.startDate,
      endDate: this.endDate
    }
  }

  private dateChange(val) {
    this.value = val
    const date: any = new Date(val)
    const year: any = date.getFullYear();
    const month: any = date.getMonth() + 1
    const day: any = date.getDate()
    const lastDay: any = new Date(year, month, 0).getDate();
    switch (this.radio) {
      case 'year':
        this.startDate = `${year}-01-01 00:00:00`
        this.endDate = `${year}-12-31 23:59:59`
        break;
      case 'month':
        this.startDate = `${this.$filter.dateFormat(val)} 00:00:00`
        this.endDate = `${year}-${month}-${lastDay} 23:59:59`
        break;
      case 'week':
        this.weekHandler(year, month, day, lastDay)
        break;
      case 'day':
        this.startDate = `${this.$filter.dateFormat(val)} 00:00:00`
        this.endDate = `${this.$filter.dateFormat(val)} 23:59:59`
        break;
      default:
        this.startDate = ''
        this.endDate = ''
        break;
    }
    this.refreshData()
  }

  private radioChange(val) {
    switch (val) {
      case 'year':
        this.dateType = "year"
        this.format = 'yyyy'
        this.placeholder = '请选择年份'
        break;
      case 'month':
        this.dateType = "month"
        this.format = 'yyyy-MM'
        this.placeholder = '请选择月份'
        break;
      case 'week':
        this.dateType = "week"
        this.format = 'yyyy 第 WW 周'
        this.placeholder = '请选择周'
        break;
      case 'day':
        this.dateType = "date"
        this.format = 'yyyy-MM-dd'
        this.placeholder = '请选择日期'
        break;
    }
    this.value = ''
  }

  private weekHandler(year, month, day, lastDay) {
    this.getfirstDate(year, month, day)
    this.getEndDate(year, month, day, lastDay)
  }

  private getEndDate(year, month, day, lastDay) {
    let end: any = day + 5
    let endMonth: any = ''
    let endYear: any = ''
    if (month >= 12 && end > lastDay) {
      endYear = year + 1
      endMonth = 1
      end = '0' + (end - lastDay)
    } else if (month < 12 && end > lastDay) {
      endYear = year
      endMonth = month + 1
      end = '0' + (end - lastDay)
    } else {
      endYear = year
      endMonth = month
      end = end < 10 ? '0' + end : end
    }
    this.endDate = `${endYear}-${endMonth}-${end} 23:59:59`
  }

  private getfirstDate(year, month, day) {
    let first: any = day - 1
    let firstYear: any = ''
    let firstMonth: any = ''
    if (month === 1 && day === 1) {
      firstYear = year - 1
      firstMonth = 12
      first = new Date(year, month, 0)
    } else if (month !== 1 && day === 1) {
      firstYear = year
      firstMonth = month - 1
      first = new Date(year, month, 0)
    } else {
      firstYear = year
      firstMonth = month
      first = first < 10 ? '0' + first : first
    }
    this.startDate = `${firstYear}-${firstMonth}-${first} 00:00:00`
  }

}
</script>
